<template>
  <div class="heartbeat-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let ctx = null
let animationFrame = null
let time = 0
let ecgData = []
let hearts = []

class Heart {
  constructor(canvas) {
    this.canvas = canvas
    this.x = Math.random() * canvas.width
    this.y = Math.random() * canvas.height
    this.baseSize = Math.random() * 30 + 20
    this.size = this.baseSize
    this.pulsePhase = Math.random() * Math.PI * 2
    this.pulseSpeed = 0.05
    this.opacity = Math.random() * 0.3 + 0.2
    this.floatSpeed = (Math.random() - 0.5) * 0.5
    
    const colors = [
      { r: 255, g: 100, b: 150 },
      { r: 255, g: 150, b: 200 },
      { r: 200, g: 100, b: 200 }
    ]
    this.color = colors[Math.floor(Math.random() * colors.length)]
  }

  update() {
    this.pulsePhase += this.pulseSpeed
    this.size = this.baseSize + Math.sin(this.pulsePhase) * 5
    this.y += this.floatSpeed
    
    if (this.y < -50 || this.y > this.canvas.height + 50) {
      this.y = this.y < -50 ? this.canvas.height + 50 : -50
    }
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.globalAlpha = this.opacity

    // 绘制心形
    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.size)
    gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.8)`)
    gradient.addColorStop(0.5, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.4)`)
    gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`)

    ctx.fillStyle = gradient
    ctx.shadowBlur = 20
    ctx.shadowColor = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.5)`

    ctx.beginPath()
    ctx.moveTo(0, this.size * 0.3)
    
    // 左半边
    ctx.bezierCurveTo(
      -this.size * 0.5, -this.size * 0.3,
      -this.size, this.size * 0.1,
      0, this.size * 0.8
    )
    
    // 右半边
    ctx.bezierCurveTo(
      this.size, this.size * 0.1,
      this.size * 0.5, -this.size * 0.3,
      0, this.size * 0.3
    )
    
    ctx.closePath()
    ctx.fill()

    ctx.restore()
  }
}

const generateECGWave = () => {
  // 生成心电图波形数据
  ecgData = []
  const points = 200
  
  for (let i = 0; i < points; i++) {
    const t = i / points
    let value = 0
    
    // P波
    if (t > 0.1 && t < 0.2) {
      value = Math.sin((t - 0.1) * Math.PI * 10) * 0.2
    }
    // QRS波群
    else if (t > 0.25 && t < 0.4) {
      if (t < 0.3) {
        value = -(t - 0.25) * 10
      } else if (t < 0.35) {
        value = (t - 0.3) * 20 - 0.5
      } else {
        value = -(t - 0.35) * 10 + 0.5
      }
    }
    // T波
    else if (t > 0.45 && t < 0.65) {
      value = Math.sin((t - 0.45) * Math.PI * 5) * 0.3
    }
    
    ecgData.push(value)
  }
}

const drawECGLine = (ctx, canvas, yOffset) => {
  if (ecgData.length === 0) return

  ctx.save()
  ctx.strokeStyle = 'rgba(255, 100, 150, 0.6)'
  ctx.lineWidth = 3
  ctx.shadowBlur = 10
  ctx.shadowColor = 'rgba(255, 100, 150, 0.5)'
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'

  const width = canvas.width
  const height = 100
  const centerY = yOffset

  ctx.beginPath()
  
  // 绘制多个周期的心电图
  const cycles = 3
  for (let cycle = 0; cycle < cycles; cycle++) {
    const offset = (time * 2 + cycle * ecgData.length) % (ecgData.length * cycles)
    
    for (let i = 0; i < ecgData.length; i++) {
      const x = ((i + offset) / (ecgData.length * cycles)) * width
      const y = centerY - ecgData[i] * height
      
      if (i === 0 && cycle === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    }
  }
  
  ctx.stroke()

  // 绘制网格
  ctx.strokeStyle = 'rgba(255, 100, 150, 0.1)'
  ctx.lineWidth = 1
  ctx.shadowBlur = 0
  
  // 水平网格
  for (let y = centerY - height; y <= centerY + height; y += 20) {
    ctx.beginPath()
    ctx.moveTo(0, y)
    ctx.lineTo(width, y)
    ctx.stroke()
  }
  
  // 垂直网格
  for (let x = 0; x <= width; x += 20) {
    ctx.beginPath()
    ctx.moveTo(x, centerY - height)
    ctx.lineTo(x, centerY + height)
    ctx.stroke()
  }

  ctx.restore()
}

const drawBPMIndicator = (ctx, canvas) => {
  const bpm = 72 + Math.sin(time * 0.1) * 5
  const x = canvas.width - 150
  const y = 80

  ctx.save()
  
  // 背景
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
  ctx.fillRect(x - 10, y - 50, 140, 80)
  ctx.strokeStyle = 'rgba(255, 100, 150, 0.5)'
  ctx.lineWidth = 2
  ctx.strokeRect(x - 10, y - 50, 140, 80)

  // BPM文字
  ctx.fillStyle = 'rgba(255, 100, 150, 1)'
  ctx.font = 'bold 36px Arial'
  ctx.textAlign = 'center'
  ctx.shadowBlur = 10
  ctx.shadowColor = 'rgba(255, 100, 150, 0.8)'
  ctx.fillText(Math.round(bpm), x + 60, y)

  ctx.font = '14px Arial'
  ctx.fillText('BPM', x + 60, y + 20)

  // 心跳图标
  const heartSize = 15
  ctx.translate(x + 10, y - 25)
  const pulse = Math.sin(time * 0.3) * 3 + heartSize
  
  ctx.fillStyle = 'rgba(255, 100, 150, 1)'
  ctx.beginPath()
  ctx.moveTo(0, pulse * 0.3)
  ctx.bezierCurveTo(-pulse * 0.5, -pulse * 0.3, -pulse, pulse * 0.1, 0, pulse * 0.8)
  ctx.bezierCurveTo(pulse, pulse * 0.1, pulse * 0.5, -pulse * 0.3, 0, pulse * 0.3)
  ctx.closePath()
  ctx.fill()

  ctx.restore()
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  ctx = canvas.getContext('2d')

  // 生成心电图数据
  generateECGWave()

  // 创建漂浮的心形
  hearts = []
  for (let i = 0; i < 10; i++) {
    hearts.push(new Heart(canvas))
  }

  animate()
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  time += 1

  // 渐变背景
  const gradient = ctx.createRadialGradient(
    canvasRef.value.width / 2,
    canvasRef.value.height / 2,
    0,
    canvasRef.value.width / 2,
    canvasRef.value.height / 2,
    Math.max(canvasRef.value.width, canvasRef.value.height) / 2
  )
  gradient.addColorStop(0, '#1a0a0f')
  gradient.addColorStop(0.5, '#0f0508')
  gradient.addColorStop(1, '#000000')
  
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  // 更新和绘制漂浮的心形
  hearts.forEach(heart => {
    heart.update()
    heart.draw(ctx)
  })

  // 绘制心电图线
  drawECGLine(ctx, canvasRef.value, canvasRef.value.height / 2)
  drawECGLine(ctx, canvasRef.value, canvasRef.value.height / 2 + 200)
  drawECGLine(ctx, canvasRef.value, canvasRef.value.height / 2 - 200)

  // 绘制BPM指示器
  drawBPMIndicator(ctx, canvasRef.value)

  animationFrame = requestAnimationFrame(animate)
}

const handleResize = () => {
  if (!canvasRef.value) return
  canvasRef.value.width = window.innerWidth
  canvasRef.value.height = window.innerHeight
}

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.heartbeat-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

